<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户信誉管理界面</title>
    <!--引入 element-ui 的样式，-->
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <h2><span>用户信誉管理界面</span></h2>
    <hr>
    <template>
        <div class="table">
            <el-table
                    :data="creditList"
                    style="width: 100%">
                <el-table-column
                        prop="uid"
                        label="序号">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="cd_message"
                        label="信誉度">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button  @click="updateCredit(scope.row.uid)" class="btn btn-info" role="button" style="background-color: #26BABD"  data-toggle="modal" data-target="#myModal" >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- total:总条数 prev:上一页  pager:当前页 next:上一页 jumper 前往第几页-->
            <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @size-change="handleSizeCredict"
                    @current-change="handleCurrentCredict">
            </el-pagination>
        </div>
    </template>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">个人征信</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <form>
                    <div class="modal-body input-group">
                        <div class="container mt-3">
                            <div class="input-group mb-3" hidden>
                                <div class="input-group-prepend">
                                    <span class="input-group-text">序号：</span>
                                </div>
                                <input type="text" class="form-control" placeholder="序号：" v-model="credit.cd_id" name="cd_id" readonly>
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">用户名：</span>
                                </div>
                                <input type="text" class="form-control" placeholder="用户名：" v-model="credit.username" name="username" readonly>
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">选定信誉度：</span>
                                </div>
                                <select id="res" style="width: 300px">
                                    <option hidden>{{credit.cd_message}}</option>
                                    <option v-for="c in credits"  name="cd_message"  :value="c.cd_id">{{c.cd_message}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" @click="updateUserCredit(credit.uid)">编辑</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<style>
    .el-breadcrumb{
        margin-bottom: 15px;
        font-size: 12px;
    }
    .el-card{
        box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
    /*分页*/
    .page-bar{
        margin:40px auto;
        margin-top: 150px;

    }
    ul,li{
        margin: 0px;
        padding: 0px;
    }
    li{
        list-style: none
    }
    .page-bar li:first-child>a {
        margin-left: 0px
    }
    .page-bar a{
        border: 1px solid #ddd;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #5D6062;
        cursor: pointer;
        margin-right: 20px;
    }
    .page-bar a:hover{
        background-color: #eee;
    }
    .page-bar a.banclick{
        cursor:not-allowed;
    }
    .page-bar .active a{
        color: #fff;
        cursor: default;
        background-color: #E96463;
        border-color: #E96463;
    }
    .page-bar i{
        font-style:normal;
        color: #d44950;
        margin: 0px 4px;
        font-size: 12px;
    }
</style>
<script type="text/javascript">
    new Vue( {
        el:"#app",
        data:{
            currentPage:1, //初始页
            pageSize:5,    //    每页的数据
            total:1,
            creditList: [],
            creditId:{
                uid:''
            },
            credit:{},
            credits:[],
            creditUser:{
                uid:''
            }

        },
        methods: {
            updateCredit(uid){
                var cer = this;
                this.creditId.uid=uid;
                axios.post('/admin/selectCreditbyId/',"uid="+uid).then(res=>{
                    cer.credit=res.data.credit;
                    cer.credits=res.data.credits;
                })
            },
            handleSizeCredict(pageSize){
                this.pageSize = pageSize;
                // 点击每页显示的条数时，显示第一页
                this.showData(this.currentPage,this.pageSize)
            },
            showData(currentPage,pageSize){
                var credit = this;
                axios.get("/admin/getCreditList/" + currentPage + "/" + pageSize).then(res => {
                    console.log(res);
                    credit.creditList = res.data.list;
                    credit.total = res.data.total;
                    console.log(res.data.list);
                })
            },
            handleCurrentCredict(currentPage){
                this.currentPage = currentPage;
                // 点击每页显示的条数时，显示第一页
                this.showData(this.currentPage,this.pageSize);
            },
            updateUserCredit(uid){
                var msg = "您真的确定要修改吗？\n\n请确认！";
                if (confirm(msg)==true) {
                    let obj = document.getElementById("res"); //定位id
                    let index = obj.selectedIndex; // 选中索引
                    let cd_id = obj.options[index].value; // 选中值
                    this.creditUser.uid = uid;
                    axios.post('/admin/updateUserCredit', "uid=" + uid + "&cd_id=" + cd_id).then(res => {
                        console.log(res.data)
                    })
                    alert("修改成功！！！");
                    window.location.href="UserCredict.html";
                    return true;
                }else{
                    alert("修改失败！！！");
                    window.location.href="UserCredict.html";
                    return false;
                }
            }
        },created() {
            this.showData(1, 5)
        }
    })
</script>
</html>